<!--个人中心页面-->
<template>
  <div class="main-content" style="width:  819px">
    <el-tabs v-model="activeName" @tab-click="clickTab">
      <el-tab-pane label="个人资料" name="个人资料">
        <PersonPage @updae:user="updateUser"/>
      </el-tab-pane>
      <el-tab-pane label="发表的博客" name="发表的博客">
        <div class="card" style="padding: 5px;">
          <el-button type="primary" @click="addBlog">写新博客</el-button></div>
        <div style="margin-top: 10px">
          <BlogList type="user" :show-opt="true"/>
        </div>
      </el-tab-pane>
      <el-tab-pane label="报名的活动" name="报名的活动">
        <activity-list type="user" :span="8" />
      </el-tab-pane>
      <el-tab-pane label="我的点赞" name="我的点赞">
        <div class="card" style="padding: 5px;display: flex">
          <div class="likesCategoryButton" :class="{'active':likesCurrent === '博客'}" @click="likesCurrent='博客'" style="" >博客</div>
          <div class="likesCategoryButton" :class="{'active':likesCurrent === '活动'}" @click="likesCurrent='活动'" style="">活动</div>
        </div>
        <div style="margin-top: 10px;">
          <BlogList v-if="likesCurrent==='博客'" type="like"></BlogList>
          <ActivityList v-if="likesCurrent==='活动'" type="like" :span="8"></ActivityList>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的收藏" name="我的收藏">
        <div class="card" style="padding: 5px;display: flex">
          <div class="likesCategoryButton" :class="{'active':collectCurrent === '博客'}" @click="collectCurrent='博客'" style="" >博客</div>
          <div class="likesCategoryButton" :class="{'active':collectCurrent === '活动'}" @click="collectCurrent='活动'"  style="">活动</div>
        </div>
        <div style="margin-top: 10px;">
          <BlogList v-if="collectCurrent==='博客'" type="collect"></BlogList>
          <ActivityList v-if="collectCurrent==='活动'" type="collect" :span="8"></ActivityList>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的评论" name="我的评论">
        <div class="card" style="padding: 5px;display: flex">
          <div class="likesCategoryButton" :class="{'active':commentCurrent === '博客'}"  @click="commentCurrent='博客'" style="" >博客</div>
          <div class="likesCategoryButton" :class="{'active':commentCurrent === '活动'}"  @click="commentCurrent='活动'" style="">活动</div>
        </div>
        <div style="margin-top: 10px;">
          <BlogList v-if="commentCurrent ==='博客'" type="comment"></BlogList>
          <ActivityList v-if="commentCurrent ==='活动'"  type="comment" :span="8"></ActivityList>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import PersonPage from "@/components/PersonPage.vue";
import BlogList from "@/components/BlogList.vue";
import ActivityList from "@/components/ActivityList.vue";

export default {
  components: {
    PersonPage,    //修改账号信息卡片组件
    BlogList,   //博客组件
    ActivityList
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请确认密码'))
      } else if (value !== this.user.newPassword) {
        callback(new Error('确认密码错误'))
      } else {
        callback()
      }
    }
    return {
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      dialogVisible: false,

      rules: {
        password: [
          { required: true, message: '请输入原始密码', trigger: 'blur' },
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
        ],
        confirmPassword: [
          { validator: validatePassword, required: true, trigger: 'blur' },
        ],
      },
      activeName: "个人资料",
      likesCurrent: '博客',   //我的点赞模块分区效果按钮参数
      collectCurrent: '博客',   //我的收藏模块分区效果按钮参数
      commentCurrent: '博客',   //我的评论模块分区效果按钮参数

    }
  },
  created() {

  },
  methods: {


    updateUser(){//再次更新父级数据
      this.$emit('update:user')
    },
    addBlog(){
        window.open("/front/newBlog");
    },
    clickTab(tab) {
      console.log(tab);
    },
  }
}
</script>

<style scoped>
.el-form-item__label {
  font-weight: bold;
}
.el-upload {
  border-radius: 50%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  border-radius: 50%;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
}
.likesCategoryButton {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
}
.active{
  background-color:#007c7c;
  color:white;
}
</style>